<template>
  <ul class="detail-box">
    <li v-for="goods in goodlist" :key="goods.id">
        <img :src="goods.img">
        <p class="title">{{goods.name}}</p>
        <p class="price">￥{{goods.price}}</p>
    </li>
  </ul>
</template>

<script>
 
// import axios from "axios";

export default {
 name:"DetailVue",
 data(){
  return{
    goodlist:[]
  }
 },
 created(){
    this.$server({
      url:"goods"
    })
    .then(res=>{
      this.goodlist=res.data;
    })
 }
}
</script>

<style scoped>
.detail-box{
 width: 100%;
 font-size: .875rem;
 column-count: 2;
 column-gap: .3125rem;
}
.detail-box li{
 width: 100%;
 text-align: center;
 break-inside: avoid ;
 background-color: white;
 border-radius: .9375rem;
 margin-top: .3125rem;
}
.detail-box li img{
  width: 90%;
  /* border-radius: .9375rem; */
  margin-top: .3125rem;
}
.title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.price{
  text-align: left;
  color: red;
  font-size: 1.125rem;
}
</style>